<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期钩子</h2>
      <!-- <ul>
        <li v-for="item in list" :key="item._id">{{item.title}}</li>
      </ul> -->
      <p>{{ num }}</p>
      <button @click="fn">btn</button>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 生命周期钩子本身也是选项，写在和data并列的地方
      // 创建阶段和挂载阶段的生命周期是会自动调用的
      // 生命周期的执行顺序跟书写顺序无关，只和名字有关

      // 数据请求可以在created，beforeMount，mounted里面调用

      createApp({
        data() {
          return {
            num: 3,
            list: [],
          };
        },
        methods: {
          fn() {
            this.num++;
          },
        },
        // template相当于innerHTML
        // template: "<div>123</div>",
        // 创建阶段
        beforeCreate() {
          // 在beforeCreate的时候，是不能够拿到data的数据以及methods的方法等等
          // 一般认为不要在beforeCreate里面做数据请求
          console.log("beforeCreate", this.num, this.fn);
          // fetch("http://pudge.wang:3080/api/rated/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     console.log(res);
          //     this.list = res.result;
          //   });
        },
        // 在beforeCreate和created中间会去初始化选项api
        created() {
          // 已经可以拿到data了，所以这里可以做数据请求
          console.log("created", this.num, this.fn);
        },

        // 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },
        // 挂载前后，vue自己去初始化创建和插入dom节点
        // 在beforeMount的时候，页面还没有东西
        // 直到mounted的时候，页面才渲染结束
        mounted() {
          console.log("mounted", document.querySelector("#app").innerHTML);
        },

        // 更新阶段
        // 只要data的数据发生了改变，这两个函数就会执行
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.num,
            document.querySelector("p").innerHTML
          );
        },
        // 更新前和更新后是页面重新渲染的前后，而不是数据改变的前后
        // 都是数据改变之后
        // 不能在updated里面修改数据，会造成死循环
        updated() {
          console.log(
            "updated",
            this.num,
            document.querySelector("p").innerHTML
          );
          this.num++;
        },

        // 卸载阶段
        // 如果页面存在定时器，需要在销毁的时候将定时器清掉
        // Websocket长连接,后端可以向前端推送内容,断开长连接
        // addEventListener原生的js事件监听,removeEventListener
        // eCharts或者地图等第三方插件的时候,卸载实例以释放内存
        beforeUnmount() {
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      }).mount("#app");
    </script>
  </body>
</html>
